import { computed, defineComponent, type HTMLAttributes } from "vue";

type DisplayNameProps = HTMLAttributes & {
  firstName: string;
  lastName: string;
};

/**
 * 简单计算属性示例
 */
const DisplayName = defineComponent<DisplayNameProps>({
  props: ["firstName", "lastName"],
  setup(props) {
    const fullname = computed(() => `${props.firstName} ${props.lastName}`);
    return () => (
      <div>
        {fullname.value}({fullname.value.toUpperCase()})
      </div>
    );
  },
});

export default DisplayName;
